<script>
import { reactive, toRefs } from "vue";
// import { useRoute } from "vue-router";
export default {
  setup() {
    // let route = useRoute();
    const list = reactive({
      comment_value:"",
      context: JSON.parse(window.localStorage.getItem("article_content")),
      comment_list: [
        {
          id: 1,
          name: "中分背带裤",
          content: "唱、跳、rap、篮球",
          is_liked: 0,
        },
        {
          id: 2,
          name: "为爱冲锋",
          content: "一人攻5保安",
          is_liked: 0,
        },
      ],
    });
    // 点赞显示与隐藏
    let show_thumb = (id)=>{
      let index = list.comment_list.findIndex(item=>item.id==id);
      if(list.comment_list[index].is_liked==1){
        list.comment_list[index].is_liked = 0
      }else {
        list.comment_list[index].is_liked = 1
      }
    }
    // 添加评论
    let add_comment = ()=>{
      list.comment_list.unshift({
        id: Date.now(),
        name: "中分背带裤",
        content: list.comment_value,
        is_liked: 0,
      })
      list.comment_value="";
    }
    //点赞数量
    function num(){
      return list.comment_list.reduce((total,item)=>{
        if(item.is_liked==1){
          return total += 1;
        }
        return total;
      },0)
    }

    return {
      ...toRefs(list),
      show_thumb,
      add_comment,
      num,
    };
  },
};
</script>

<template>
  <div class="container article">
    <van-sticky>
      <div class="top">
        <i class="iconfont icon-zuobian" @click="$router.go(-1)"></i>
        <h4>资讯详情</h4>
      </div>
    </van-sticky>

    <div class="content">
      <h2>{{ context.title }}</h2>
      <div class="author">
        <div class="img">
          <img
            src="https://bsty-video.oss-cn-chengdu.aliyuncs.com/live/18515528029932.jpg"
            alt=""
          />
        </div>
        <div class="text">
          <div class="name">{{ context.authorName }}</div>
          <div class="time">{{ context.createTime }}</div>
        </div>
      </div>

      <div class="text">
        <div v-html="context.content"></div>
      </div>
    </div>
    <!-- 评论 -->
    <div class="pl-video">
      <div class="hd">
        <span>最新评论</span>
      </div>
      <div class="bd">
        <div class="nothing" v-show="comment_list.length < 1">
          评论为空，你先来一发吧~
        </div>
        <div class="plcon">
          <div class="content">
            <ul class="pl-list">
              <li v-for="item in comment_list" :key="item.id">
                <img src="https://panqiu8-1309958500.cos.ap-guangzhou.myqcloud.com/images/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20221029101636.jpg" alt="" />
                <div class="text">
                  <div class="text-top">
                    <div class="name">{{ item.name }}</div>
                    <div class="good">
                      {{ item.is_liked }}
                      <i
                        class="iconfont icon-appreciate_fill_light con"
                        v-show="item.is_liked == 1"
                        @click="show_thumb(item.id)"
                      ></i>
                      <i
                        class="iconfont icon-appreciate_light"
                        v-show="item.is_liked == 0"
                        @click="show_thumb(item.id)"
                      ></i>
                    </div>
                  </div>
                  <div class="time">刚刚</div>
                  <div class="cont">{{ item.content }}</div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="app">
      <div class="title">
        <input type="text" placeholder="发表评论参与互动" v-model="comment_value"
          @keydown.enter="add_comment" />
      </div>
      <div class="option">
        <div class="zan">
          <i class="iconfont icon-appreciate_light"></i>
          <div class="red-zan">{{num()}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
// 评论
.app {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: calc(13px / 2) 20px calc(13px / 2) 12px;
  border-top: 1px solid #ededf3;
  height: 49px;
  max-width: 750px;
  min-width: 375px;
  line-height: 49px;
  background: linear-gradient(270deg, #7b0b3b 0%, #d51c78 100%);
  font-size: 14px;
  color: #fff;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  .title {
    width: calc(100% - 50px);

    height: 36px;
    line-height: 36px;
    background: #f7f7f9;
    border-radius: 40px;
    font-size: 14px;
    color: #999;
    input {
      height: 36px;
      padding-left: 14px;

      padding-right: 14px;
      width: 100%;
      background: #f7f7f9;
      border-radius: 40px;
      font-size: 14px;
      color: #999;
      border: none;
      outline: none;
    }
  }
  .option {
    margin-top: 6px;
    height: 24px;
    line-height: 24px;
    display: flex;
    .iconfont {
      font-size: 22px;
    }
    .com {
      position: relative;
      height: 24px;
      .red-com {
        position: absolute;
        top: -4px;
        left: 16px;
        width: 100%;
        height: 14px;
        line-height: 14px;
        border-radius: 10px;
        background: #da4136;
        font-size: 12px;
        color: #fff;
        text-align: center;
        font-style: normal;
      }
    }
    .zan {
      position: relative;
      margin-left: 12px;
      height: 24px;
      .red-zan {
        position: absolute;
        top: -4px;
        left: 14px;
        width: 14px;
        height: 14px;
        line-height: 14px;
        border-radius: 100%;
        background: #da4136;
        font-size: 12px;
        color: #fff;
        text-align: center;
        font-style: normal;
      }
    }
  }
}
.pl-video {
  background: #fff;
  margin-top: 8px;
  .hd {
    padding: 0 12px;
    height: 40px;
    line-height: 40px;
    span {
      font-size: 14px;
      color: #242629;
      font-weight: 700;
    }
  }
  .bd {
    padding-bottom: 50px;
    .nothing {
      width: 100%;
      height: 200px;
      line-height: 200px;
      background: #f2f2f2;
      font-size: 16px;
      color: #999;
      text-align: center;
    }
  }
}
.plcon {
  margin-top: 10px;
  padding: 0 14px;
  .content {
    width: 100%;

    .pl-list {
      width: 100%;

      li {
        display: flex;
        border-bottom: 1px solid #f4f4f4;
        width: 100%;
        margin-bottom: 16px;

        img {
          width: 32px;
          height: 32px;
          border-radius: 50%;
        }
        .text {
          margin-left: 10px;
          width: 100%;
          .text-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            .name {
              color: #ababab;
              font-size: 14px;
              margin-bottom: 4px;
            }
            .good {
              font-size: 10px;
              color: #ababab;
              .iconfont {
                margin-left: 4px;
                font-size: 14px;
              }
            }
          }

          .time {
            font-size: 10px;
            color: #ababab;
            margin-bottom: 8px;
          }
          .cont {
            display: flex;
            align-items: center;
            color: #000;
            font-size: 12px;
            margin-bottom: 16px;
          }
        }
      }
    }
  }
}
.article {
  .top {
    display: flex;
    height: 38px;
    background: linear-gradient(270deg, #7b0b3b 0%, #d51c78 100%);
    padding: 10px;
    color: #fff;

    h4 {
      flex: 1;
      text-align: center;
      font-weight: 700;
      font-size: 14px;
      margin-right: 10px;
    }
  }
  .content {
    padding: 0 10px 10px;
    h2 {
      font-size: 22px;
      font-weight: bold;
      margin-top: 20px;
      margin-bottom: 12px;
    }
    .author {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      .img {
        width: 36px;
        height: 36px;
        margin-right: 10px;
        img {
          width: 100%;
          border-radius: 50%;
        }
      }
      .text {
        .name {
          font-size: 14px;
          color: #000;
          margin-bottom: 1px;
        }
        .time {
          font-size: 12px;
          color: #9d9fa0;
        }
      }
    }
    .text {
      p {
        font-size: 14px;
        margin-top: 10px;
      }
      img {
        margin-top: 10px;
        width: 100%;
      }
      .tags {
        width: 54px;
        font-size: 12px;
        color: #007aff;
        margin-right: 10px;
        background: rgba(0, 122, 255, 0.1);
        padding: 2px 3px;
        margin-top: 10px;
      }
      .like {
        text-align: center;
        margin-top: 20px;
        margin-bottom: 20px;
        font-size: 18px;
        .iconfont {
          margin-right: 4px;
          font-size: 22px;
        }
      }
      .more {
        display: flex;
        font-size: 16px;
        margin-bottom: 10px;
        .iconfont {
          font-size: 20px;
          margin-right: 2px;
        }
      }
      .item {
        height: 98px;
        display: flex;
        align-items: center;
        border-top: 1px solid #eeeeee;
        padding: 0px 5px;
        margin-bottom: 20px;
        .text {
          flex: 1;
          padding-top: 10px;
          margin-right: 15px;
          font-size: 16px;
        }
        .img {
          width: 110px;
          height: 83px;
          img {
            width: 100%;
            height: 83px;
            border-radius: 5px;
          }
        }
      }
    }
  }
}
.text:deep {
  img {
    width: 100%;
  }
}
.container {
  background-color: #fff;
}
.con {
  color: #da4136;
}
</style>
